<template>
  <div class="condition-node" :class="{ selected: selected }">
    <div class="node-content">
      <el-icon class="node-icon"><Switch /></el-icon>
      <div class="node-text">
        <div class="node-title">{{ data?.name || '条件' }}</div>
        <div class="node-subtitle">
          {{ data?.condition || '请设置条件' }}
        </div>
      </div>
    </div>
    <Handle
      id="target"
      type="target"
      :position="Position.Left"
      :style="{ background: '#e6a23c', width: '20px', height: '20px', border: '3px solid #fff', boxShadow: '0 0 8px #e6a23c', zIndex: 2, cursor: 'pointer' }"
    />
    <Handle
      id="source-true"
      type="source"
      :position="Position.Right"
      :style="{ background: '#67c23a', width: '20px', height: '20px', border: '3px solid #fff', boxShadow: '0 0 8px #67c23a', zIndex: 2, cursor: 'pointer' }"
    />
    <Handle
      id="source-false"
      type="source"
      :position="Position.Bottom"
      :style="{ background: '#f56c6c', width: '20px', height: '20px', border: '3px solid #fff', boxShadow: '0 0 8px #f56c6c', zIndex: 2, cursor: 'pointer' }"
    />
  </div>
</template>

<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
import { ElIcon } from 'element-plus'
import { Switch } from '@element-plus/icons-vue'

defineProps({
  id: String,
  data: Object,
  selected: Boolean
})

defineOptions({
  name: 'ConditionNode'
})
</script>

<style scoped>
.condition-node {
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
  color: white;
  min-width: 120px;
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}

.condition-node.selected {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon {
  font-size: 20px;
  color: white;
}

.node-text {
  flex: 1;
}

.node-title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
}

.node-subtitle {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
  word-break: break-all;
}

::v-deep(.vue-flow__handle) {
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 2 !important;
  cursor: pointer !important;
}
</style> 